import { action, computed, observable } from "mobx"
import { observer } from "mobx-react"
import React from "react"
import ReactDOM from "react-dom"

export class CounterStore {
  @observable
  count = 0

  @action
  increment() {
    this.count++
  }

  @action
  decrement() {
    this.count--
  }

  @computed
  get doubleCount() {
    return this.count * 2
  }
}

export class ThemeStore {
  @observable theme = 'light'

  @action
  setTheme(newTheme: string) {
    this.theme = newTheme
  }
}

let stores = {
  counterStore: new CounterStore(),
  themeStore: new ThemeStore(),
}

export const storesContext = React.createContext(stores)

export const useStores = () => React.useContext(storesContext)

export const Counter = observer(() => {
  const { counterStore } = stores //or useStores()

  return (
    <>
      <div>{counterStore.count}</div>
      <button onClick={() => counterStore.increment()}>++</button>
      <button onClick={() => counterStore.decrement()}>--</button>
    </>
  )
})

export const ThemeToggler = observer(() => {
  const { themeStore } = stores //or useStores()

  return (
    <>
      <div>{themeStore.theme}</div>
      <button onClick={() => themeStore.setTheme('light')}>
        set theme: light
        </button>
      <button onClick={() => themeStore.setTheme('dark')}>
        set theme: dark
        </button>
    </>
  )
})

// src/App.tsx
const App = () => (
  <main>
    <Counter />
    <ThemeToggler />
  </main>
)

export function RenderM() {
  ReactDOM.render(<App />, document.getElementById("app"))
}
